<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮换海报</title>
    <style>
      *{
        padding: 0;
        margin: 0;
      }
      #pic{
          position: relative;
          width: 300px;
          height: 300px;
      }
      #pic>div{
        width: 300px;
        height: 300px;
      }
      #pic>div>img{
        width: 100%;
        height: 100%;
      }
      #pic>ul{
          position: absolute;
          top: 50px;
          right: 0;
      }
      #pic>ul>li
      {
        list-style: none;
        width: 20px;
        background-color: #cccccc;
        border-radius: 50%;
        padding: 5px;
        margin: 5px;
        text-align: center;
        cursor: pointer;
      }
      #pic>ul>li:nth-child(1){
          background-color: red;
      }

    </style>
    <script src="min_jq/min.js"></script>
</head>
<body>
  <div id="pic">
    <div>
      <img src="picture/test1.png" alt="无法显示该图片">
    </div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
</body>
    <script>
        var reuse=function (){
               $("#pic>ul>li").each(function (index,element){
                $(element).css("background-color","#cccccc")
            })
        }
        var picture_list=["picture/test1.png",
            "picture/test2.png","picture/test3.png",
            "picture/test4.png","picture/test5.png"]
        $("#pic>ul>li").each(function (index,element){
            $(element).on("mouseover",function (){
                reuse();
                $(this).css("background-color","red");
                $("#pic>div>img").attr("src",picture_list[index])
            })
        })
        // 和下面的代码实现的效果一致
        // $("#pic>ul>li:nth-child(1)").on("click",function (){
        //     reuse()
        //     $(this).css("background-color","red")
        //     $("#pic>div>img").attr("src",picture_list[0])
        // })
        // $("#pic>ul>li:nth-child(2)").on("click",function (){
        //     reuse()
        //     $(this).css("background-color","red")
        //     $("#pic>div>img").attr("src",picture_list[1])
        // })
        // $("#pic>ul>li:nth-child(3)").on("click",function (){
        //     reuse()
        //     $(this).css("background-color","red")
        //     $("#pic>div>img").attr("src",picture_list[2])
        // })
        // $("#pic>ul>li:nth-child(4)").on("click",function (){
        //     reuse()
        //     $(this).css("background-color","red")
        //     $("#pic>div>img").attr("src",picture_list[3])
        // })
        // $("#pic>ul>li:nth-child(5)").on("click",function (){
        //     reuse()
        //     $(this).css("background-color","red")
        //     $("#pic>div>img").attr("src",picture_list[4])
        // })
    </script>
</html>